<template>
  <rx-dialog @handOk="handSelectInst" @cancel="closeWindow" :oktext="$ti18('rxForm.commitBtn','提交')" order="buttom" btnalign="center">
    <rx-fit class="rxLayout">
      <a-tabs default-active-key="myStartTable" @tabClick="tabClick">
        <a-tab-pane key="myStartTable" :tab="i18n('list.myStartTable','我的申请')">
          <div class="flowContainer" style="overflow: hidden;">
            <div class="flowHeader">
              <a-form  >
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item :label="i18n('form.itemTitle','事项标题')">
                      <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model="myStartQueryParam['Q_i.SUBJECT__S_LK']" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item :label="i18n('form.billNo','业务单号')">
                      <a-input v-model="myStartQueryParam['Q_i.BILL_NO__S_EQ']" :placeholder="i18n('form.billNo','业务单号','input')" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item >
                      <a-button type="primary" @click="search('myStartTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
            <div class="flowFooter">
              <div >
                <rx-grid
                  ref="myStartTable"
                  bordered
                  :allowRowSelect="true"
                  :multiSelect="true"
                  :columns="myStartColumns"
                  :queryParam="myStartQueryParam"
                  :defaultPageSize="10"
                  url="/api-bpm/bpm/core/bpmInst/myBpmInsts"
                  data-field="result.data"
                  :pageSizeOptions="['10', '30', '40']"
                  id-field="instId"
                  :loadDataOnstart="true"
                >
          <span slot="status" slot-scope="{ text, status }">
            <a-tag :color="statusMap[text].color">
              <span>{{ statusMap[text].text }}</span>
            </a-tag>
          </span>
                  <span slot="isLive" slot-scope="{ text,status }">
            <a-tag :color="isLiveMap[text].color">
              <span>{{isLiveMap[text].text}}</span>
            </a-tag>
          </span>

                </rx-grid>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="myTaskTable" :tab="i18n('list.myTaskTable','我的待办')" force-render>
          <div class="flowContainer">
            <div class="flowHeader">
              <a-form  >
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item :label="i18n('form.itemTitle','事项标题')">
                      <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model="myTaskQueryParam['Q_v.SUBJECT__S_LK']" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item :label="i18n('form.billNo','业务单号')">
                      <a-input v-model="myTaskQueryParam['Q_v.BILL_NO__S_EQ']" :placeholder="i18n('form.billNo','业务单号','input')" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item >
                      <a-button type="primary" @click="search('myTaskTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                    </a-form-item>

                  </a-col>
                </a-row>
              </a-form>
            </div>
            <div class="flowFooter">
              <div>
                <rx-grid
                  ref="myTaskTable"
                  bordered
                  :allowRowSelect="true"
                  :multiSelect="true"
                  :columns="myTaskColumns"
                  :queryParam="myTaskQueryParam"
                  :defaultPageSize="10"
                  url="/api-bpm/bpm/core/bpmTask/myTasks"
                  data-field="result.data"
                  :pageSizeOptions="['10', '30', '40']"
                  id-field="taskId"
                  :loadDataOnstart="false"

                >
          <span slot="status" slot-scope="{ text, record, index }">
            <a-tag v-if="record.status == 'UNHANDLE'" color="red">{{i18n('statusMap.toBeDone','待办')}}</a-tag>
            <a-tag v-else-if="record.status == 'HANDLE'" color="green">{{i18n('statusMap.processing','处理中')}}</a-tag>
          </span>
                  <span slot="assignee" slot-scope="{ text, record }">
            <span>
              <a-tag v-for="taskExe in record.taskExecutors"
              ><a-icon :type="taskExe.type"></a-icon>&nbsp;{{ taskExe.name }}</a-tag
              >
            </span>
          </span>

                </rx-grid>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="myApproveTable" :tab="i18n('list.myApproveTable','我的已办')" force-render>
          <div class="flowContainer">
            <div class="flowHeader">
              <a-form  >
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item :label="i18n('form.itemTitle','事项标题')">
                      <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model="myApproveQueryParam['Q_i.SUBJECT__S_LK']" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item :label="i18n('form.billNo','业务单号')">
                      <a-input v-model="myApproveQueryParam['Q_i.BILL_NO__S_EQ']" :placeholder="i18n('form.billNo','业务单号','input')" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item >
                      <a-button type="primary" @click="search('myApproveTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                    </a-form-item>

                  </a-col>

                </a-row>
              </a-form>
            </div>
            <div class="flowFooter">
              <div>



                <rx-grid
                  ref="myApproveTable"
                  bordered
                  :allowRowSelect="true"
                  :multiSelect="true"
                  :columns="myApproveColumns"
                  :queryParam="myApproveQueryParam"
                  :defaultPageSize="10"
                  url="/api-bpm/bpm/core/bpmInst/getMyApprovedInsts"
                  data-field="result.data"
                  :pageSizeOptions="['10', '30', '40']"
                  id-field="instId"
                  :loadDataOnstart="false"

                >
          <span slot="subject" slot-scope="{ text, record,index }">
           {{text}}
          </span>
                  <span slot="status" slot-scope="{ text, status }">
            <a-tag :color="statusMap[text].color">
              <span>{{ statusMap[text].text }}</span>
            </a-tag>
          </span>
                  <span slot="endTime" slot-scope="{ text, record, index }">
            {{ text }}
          </span>

                </rx-grid>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="myReceiveTurnTable" :tab="i18n('list.myReceiveTurnTable','我收到的转发')" force-render>

          <div class="flowContainer">
            <div class="flowHeader">
              <a-form  >
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item :label="i18n('form.itemTitle','事项标题')">
                      <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model="myReceiveTurnParam['Q_A.SUBJECT__S_LK']" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item >
                      <a-button type="primary" @click="search('myReceiveTurnTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                    </a-form-item>

                  </a-col>
                </a-row>
              </a-form>
            </div>
            <div class="flowFooter">
              <div>
                <rx-grid
                  ref="myReceiveTurnTable"
                  bordered
                  :allowRowSelect="true"
                  :multiSelect="true"
                  :columns="myReceiveTurnColumns"
                  :defaultPageSize="10"
                  url="/api-bpm/bpm/core/bpmInstCc/myRecevieTurn"
                  :queryParam="myReceiveTurnParam"
                  data-field="result.data"
                  :pageSizeOptions="['10','30','40']"
                  id-field="instId"
                  :loadDataOnstart="true"
                >
                  <span slot="ccType" slot-scope="{text,record}" >
                    <a-tag :color="turnMap[text].color">
                      <span>{{turnMap[text].text}}</span>
                    </a-tag>
                  </span>

                  <span slot="isRead" slot-scope="{text,record}" >
                    <a-tag :color="readMap[record.instCp.isRead].color">
                      <span>{{readMap[record.instCp.isRead].text}}</span>
                    </a-tag>
                  </span>
                </rx-grid>
              </div>
            </div>
          </div>



        </a-tab-pane>
      </a-tabs>
    </rx-fit>
  </rx-dialog>
</template>

<script>
    import { Util } from '@lowcode/jpaas-common-lib'
    export default {
        name: "BpmMyEvents",
        props: {
            layerid: String,
            lydata: Object,
            destroy: Function
        },
        data(){
            return {
                loaded:{
                    myStartTable:true,
                    myTaskTable:false,
                    myApproveTable:false,
                    myReceiveTurnTable:false
                },
                myStartQueryParam: {"Q_i.STATUS__S_NEQ":"DRAFTED"},
                myTaskQueryParam:{},
                myApproveQueryParam:{},
                myReceiveTurnParam:{},
                statusMap: {
                    DRAFTED: { color: 'gray', text: this.i18n('statusMap.draft','草稿') },
                    RUNNING: { color: 'red', text: this.i18n('statusMap.running','运行中') }, //运行
                    SUPSPEND: { color: 'black', text: this.i18n('statusMap.suspend','暂停') }, //运行
                    CANCEL: { color: 'red', text: this.i18n('statusMap.cancel','作废') }, //作废
                    SUCCESS_END: { color: 'green', text: this.i18n('statusMap.success','成功') }, // 成功结束
                    ERROR_END: { color: 'red', text: this.i18n('statusMap.abort','异常结束') }, //异常结束
                },
                typeMap: {
                    transfer: {color: 'green', text: this.i18n('statusMap.transfer','转办')},
                    agent: {color: 'red', text: this.i18n('statusMap.agent','代理')},
                },

                turnMap: {
                    "COPY": { color: 'green', text: this.i18n('statusMap.cc','抄送') },
                    "TURN_TO": { color: 'red', text: this.i18n('statusMap.forward','转发') },
                },
                readMap: {
                    "YES": { color: 'green', text: this.i18n('statusMap.yes','已读') },
                    "NO": { color: 'red', text: this.i18n('statusMap.no','未读') },
                },


                myStartColumns:[
                    {
                        key: '02',
                        title: this.i18n('form.itemTitle','事项标题'),
                        dataIndex: 'subject',
                        width: 240,
                    },
                    {
                        key: '03',
                        title: this.i18n('form.billNo','业务单号'),
                        dataIndex: 'billNo',
                        width: 100,
                    },
                    {
                        key: '04',
                        title: this.i18n('form.runStatus','运行状态'),
                        dataIndex: 'status',
                        scopedSlots: { customRender: 'status' },
                        width: 100,
                    },
                ],
                myTaskColumns: [
                    {
                        title: this.i18n('form.itemTitle','事项标题'),
                        dataIndex: 'subject',
                        width: 180,
                        ellipsis: false,
                    },
                    {
                        title: this.i18n('form.billNo','业务单号'),
                        dataIndex: 'billNo',
                        width: 110,
                    },
                    {
                        title: this.i18n('form.node','审批环节'),
                        dataIndex: 'name',
                        width: 100,
                    },
                    {
                        title: this.i18n('form.status','状态'),
                        dataIndex: 'status',
                        scopedSlots: { customRender: 'status' },
                        width: 120,
                    }],
                myApproveColumns: [
                {
                    title: this.i18n('form.itemTitle','事项标题'),
                    dataIndex: 'subject',
                    width: 220,
                    ellipsis: false,
                    scopedSlots: { customRender: 'subject' },
                },
                {
                    title: this.i18n('form.billNo','业务单号'),
                    dataIndex: 'billNo',
                    width: 120,
                    ellipsis: false,
                }],
                    myReceiveTurnColumns:[
                        {
                            title: this.i18n('form.itemTitle','事项标题'),
                            dataIndex: 'subject',
                            width:180,
                            ellipsis:false,
                        },
                        {
                            title: this.i18n('form.ccType','转发/抄送类型'),
                            dataIndex: 'ccType',
                            width:120,
                            scopedSlots: { customRender: 'ccType' },
                        },
                        {
                            title: this.i18n('form.isRead','是否已读'),
                            dataIndex: 'isRead',
                            width:120,
                            scopedSlots: { customRender: 'isRead' },
                        }
                    ]
            }
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"BpmMyEvents",key);
            },
            closeWindow() {
                Util.closeWindow(this, 'cancel')
            },
            handSelectInst(){
                var rtnJson={};
                //读取列表数据
                for(var key in this.loaded){
                    var rows=this.$refs[key].selectedRows;
                    for(var i=0;i<rows.length;i++){
                        var o=rows[i];
                        rtnJson[o.instId]={id:o.instId,name:o.subject};
                    }
                }
                var ary=[];
                for(var key in rtnJson){
                    ary.push(rtnJson[key]);
                }
                Util.closeWindow(this, 'ok',ary);
            },
            tabClick(tab){
                if(this.loaded[tab]){
                    return;
                }
                var tabObj=this.$refs[tab];
                tabObj.loadData();
                this.loaded[tab]=true;
            },
            search(table){
                this.$refs[table].loadData();
            }

        }
    }
</script>

<style scoped>
.rxLayout .ant-form-item{
  margin-bottom: 10px;
}
.flowContainer{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding:10px;
  box-sizing: border-box;
  overflow: hidden;
}
.flowFooter{
  flex: 1;
  position: relative;
}
.flowFooter>div{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom:0;
}
</style>